<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>刮刮卡</title>
		<style>
			#ggk,#jp,#canvas{
				width: 600px;
				height: 100px;
			}
			#ggk{
				position: relative;
			}
			#jp,#canvas{
				position: absolute;
				left: 0;
				top: 0;
			}
			#jp{
				text-align: center;
				color: deeppink;
				font-size: 40px;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div id='ggk'>
			<div id='jp'></div>
			<canvas id="canvas" width="600" height="100"></canvas>
		</div>
		<script>
			var canvas = document.getElementById('canvas');
			var ggk = document.getElementById('ggk');
			var jp = document.getElementById('jp');
			var c = canvas.getContext('2d');
			
			c.fillStyle = 'darkgray'
			c.fillRect(0,0,600,100)
			c.font = '20px 微软雅黑'
			c.fillStyle = '#fff'
			c.fillText('刮刮卡',280,55)
			
			var isDraw = false
			// isDraw为true,即为允许绘制
			canvas.onmousedown = function(){
				isDraw = true
			}
			canvas.onmousemove = function(e){
				if(isDraw){
					var x = e.pageX - ggk.offsetLeft;
					var y = e.pageY - ggk.offsetTop;
					// 显示源图像之外目标图像
					c.globalCompositeOperation = 'destination-out'
					c.arc(x,y,10,0,2*Math.PI)
					c.fill()
				}
			}
			canvas.onmouseup = function(){
				isDraw = false
			}
			
			// 设置奖品随机值
			var arr = [
			{content:'一等奖：iPhoneXS',p:0.1},
			{content:'二等奖：iPhone 8',p:0.2},
			{content:'三等奖：格力空调',p:0.3},
			{content:'未中奖：谢谢惠顾'}]
			var randomNum = Math.random();
			console.log(randomNum);
			if(randomNum < arr[0].p){
				jp.innerHTML = arr[0].content
			}else if(randomNum < arr[1].p + arr[0].p){
				jp.innerHTML = arr[1].content
			}else if(randomNum < arr[2].p + arr[1].p + arr[0].p){
				jp.innerHTML = arr[2].content
			}else{
				jp.innerHTML = arr[3].content
			}
		</script>
	</body>
</html>
